<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-03-11 11:22:33
 * @LastEditors: 杨镜
 * @LastEditTime: 2022-11-04 21:17:13
-->

<template v-if="show">
  <!--发货页-->
  <KiFormDialog
    :show.sync="dialogVisible"
    title="物流信息"
    v-model="form.data"
    readonly
    :before-close="()=>{$emit('update:show',false)}"
  >
    <template v-if="receiptInfo">
        <h3 class="subtitle"><span>收货信息</span></h3>
        <div class="flex justify-between">
          <UnivariateTable>
            <tr>
              <td>姓名</td>
              <td>{{ receiptInfo.name }}</td>
              <td>电话</td>
              <td>{{ receiptInfo.phone }}</td>
            </tr>
            <tr>
              <td>地址</td>
              <td>{{ receiptInfo.areaName + receiptInfo.address }}</td>
            </tr>
          </UnivariateTable>
        </div>
    </template>
    <div class="mt40"></div>
    <span class="fs14 mr20 fw600">物流：{{ receiptInfo.logisticsCompany }}</span>
    <span class="fs14 fw600">单号：{{ receiptInfo.logisticsNum }}</span>
    <template>
      <el-popover
        trigger="manual"
        width="460"
        placement="bottom"
        v-model="showEditLogistics">
        <i slot="reference" class="el-icon-edit-outline fs16" @click="showEditLogistics = true" />
        <h4 class="subtitle ml10"><span>修改物流信息</span></h4>
        <el-form 
          v-if="showEditLogistics" 
          ref="formOfEditLogistics"
          label-width="100px" 
          :model="form.data">
            <el-form-item label="物流公司" prop="logisticsCompany" verify>
              <KiSelect
                v-model="form.data.logisticsCompany"
                :options="dataOfExpressCompany"
                :props="{
                  value: 'name',
                  label: 'name'
                }"
                placeholder="请选择物流公司"
                :search="searchOfLogisticsCompany"
              />
            </el-form-item>
            <el-form-item label="物流单号" prop="logisticsNum"  :verify="{ minLength: 6, maxLength: 30}">
              <el-input v-model="form.data.logisticsNum" placeholder="请输入物流单号" clearable maxlength="30" show-word-limit />
            </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="showEditLogistics = false">取消</el-button>
          <el-button type="primary" size="mini" @click="setModifyLogisticsInfo">确定</el-button>
        </div>
      </el-popover>
    </template>
    <div class="mb20"></div>
    <el-table
      stripe
      v-loading="form.loading"
      :data="dataOfQueryExpress"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="物流信息" prop="status"/>
      <el-table-column label="更新时间" prop="time"/>
    </el-table>
  </KiFormDialog>

</template>

<script>

export default {
  props: {
    show: Boolean,
    parentRowOrderId: String,
    expressCompany: Array
  },
  data() {
    return {
      form: {
        data: {}
      },
      dialogVisible: false,
      showEditLogistics: false,
      receiptInfo: {},
      dataOfQueryExpress: [],
      orderId: '',
      dataOfExpressCompany: []
    }
  },
  watch: {
    'parentRowOrderId' (newVal) {
      if(newVal) {
        this.orderId = newVal
      }
    },
    'show' (newVal) {
      this.dialogVisible = newVal
      if (newVal) {
        this.queryOrderDetail()
      }
    },
  },
  methods: {
    queryExpress() {
      const { logisticsNum, phone } = this.receiptInfo
      return this.$POST('sot-admin-api/fundamental/express/queryExpress', {
        numberCode: logisticsNum,
        phone: phone,
      }).then( _ => {
        this.dataOfQueryExpress = _.data
      })
    },
    queryOrderDetail() {
      this.$POST('sot-admin-api/vip/vip-order-web/queryOrderDetail', {
        orderId: this.orderId
      }).then( _ => {
        this.receiptInfo = _.data.receiptInfo
        this.form.data = { ..._.data.receiptInfo }
        this.queryExpress()
        this.showEditLogistics = false
      })
    },
    setModifyLogisticsInfo() {
        this.$refs.formOfEditLogistics.validate((valid) => {
          if (valid) {
            this.$POST('sot-admin-api/vip/vip-order-web/modifyLogisticsInfo', {
              ...this.form.data,
              orderId: this.orderId
            }).then( _ => {
                this.queryOrderDetail(this.orderId)
                this.$emit('refresh')
            }).catch( _ => {
              this.form.data = { ...this.receiptInfo }
            })
          }
        })
    },
    // 处理快递公司模糊查询(数据量[1, 158]) START
    searchOfLogisticsCompany(v) {
        let restaurants = JSON.parse(JSON.stringify(this.expressCompany));
        this.dataOfExpressCompany = v ? restaurants.filter(this.createFilter(v)) : restaurants;
    },
    createFilter(v) {
      return (_ ) => {
        return (_.name.toLowerCase().indexOf(v.toLowerCase()) === 0);
      };
    },
    // 处理快递公司模糊查询(数据量[1, 158]) END
  }
}
</script>
<style lang="scss" scoped>
.collapse_box {
	input {
		&:nth-child(1):checked ~ p {
			border-bottom-width: 1px;
			max-height: 600px;
		}
	}
	label {
    i {
      font-size: 18px;
      color: #409EFF; 
		  cursor: pointer;
    }
	}
	p {
		line-height: 30px;
		max-height: 0;
    text-align: right;
		border-bottom-width: 0;
		overflow: hidden;
		transition: all 500ms;
	}
}
</style>

